/* eslint-disable react-hooks/exhaustive-deps */
import { Button, Form, Input, message, Select, Upload } from 'antd'
import { useEffect, useState } from 'react'
import Layout from '../core/Layout'
import { UploadOutlined } from '@ant-design/icons';
import { CategoryState } from '../../store/reducers/category.reducer';
import { AppState } from '../../store/reducers';
import { useDispatch, useSelector } from 'react-redux';
import { getCategory } from '../../store/actions/category.action';
import { RcFile } from 'antd/lib/upload';
import axios from 'axios';
import { API } from '../../config';
import { isAuth } from '../../helpers/auth';
import { UserData } from '../../consts/auth';
const {
    Option
} = Select;
const AddProduct = () => {
    const categoryState: CategoryState = useSelector<AppState, CategoryState>(state => state.category);
    const [file, setfile] = useState<RcFile>()
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getCategory())
    }, [])

    
    const uploadProps = {
        accept:'image/*',
        beforeUpload: function(file: RcFile){
            setfile(file);
            return false;
        }
    }
    const {
        user,
        token
    } = isAuth() as UserData;
    function onFinished(product:any) {
        console.log(product)
        const formData = new FormData();
        for(const key in product){
            formData.set(key, product[key]);
        }

        if( file ){
            formData.set('photo', file);
        }

        axios.post(`${API}/product/create/${user._id}`, formData, {
            headers:{
                'Authorization':`Bearer ${token}`
            }
        }).then(
            ( { data } ) => {
                console.log(data);
                message.success('商品添加成功')
            },
            () => {
                message.error('商品添加失败')
            }
        )
    }
    return (
        <Layout title="添加商品" subTitle=''>
            <Form initialValues={{
                category:''
            }} onFinish={onFinished}>
                <Form.Item key="photo">
                    <Upload {...uploadProps} >
                        <Button icon={<UploadOutlined />}>商品封面</Button>
                    </Upload>
                </Form.Item>
                <Form.Item label='商品名称: ' name='name'>
                    <Input />
                </Form.Item>
                <Form.Item label='商品描述: ' name='description'>
                    <Input />
                </Form.Item>
                <Form.Item label='商品价格: ' name='price'>
                    <Input />
                </Form.Item>
                <Form.Item label='所属分类: ' name='category' key="category">
                    <Select >
                        <Option value='' key="">
                            请选择
                        </Option>
                        {
                             categoryState.category.result.map(item => (
                                <Option value={item._id} key={item._id}>
                                    {item.name}
                                </Option>
                            ))
                        }
                    </Select>
                </Form.Item>

                <Form.Item label='商品数量: ' name='quantity'>
                    <Input />
                </Form.Item>
                <Form.Item label='是否需要运输: ' name='shipping'>
                    <Select searchValue={'1'}>
                        <Option value='0' key="0">
                            否
                        </Option>
                        <Option value='1' key='1'>
                            是
                        </Option>
                    </Select>
                </Form.Item>
                <Form.Item >
                    <Button type="primary" htmlType="submit">添加商品</Button> 
                </Form.Item>
                
            </Form>
        </Layout>
    )
}

export default AddProduct
